<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/web/lib/css/bootstrap.css">
    <script src="/web/lib/js/bootstrap.bundle.js"></script>
    <script src="/web/lib/js/lodash.js"></script>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="main">
        <div class="topbar">

        </div>
        <div class="box">
            <div class="divbg">
                <div class="form-floating mb-3 searchbox">
                    <input type="text" class="form-control" id="mysearch" placeholder="name@example.com">
                    <label for="floatingInput">搜索关键字</label>
                    <ul class="list-group searchlist" id="list">
                       
                    </ul>
                </div>
            </div>
            <div class="latestnews">

            </div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link navsty active" id="home-tab" data-bs-toggle="tab" data-bs-target="#tab0"
                        type="button" role="tab" aria-controls="home" aria-selected="true">最新动态</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link navsty" id="profile-tab" data-bs-toggle="tab" data-bs-target="#tab1"
                        type="button" role="tab" aria-controls="profile" aria-selected="false">典型案例</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link navsty" id="contact-tab" data-bs-toggle="tab" data-bs-target="#tab2"
                        type="button" role="tab" aria-controls="contact" aria-selected="false">通知公告</button>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="tab0" role="tabpanel" aria-labelledby="home-tab">111</div>
                <div class="tab-pane fade" id="tab1" role="tabpanel" aria-labelledby="profile-tab">222</div>
                <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="contact-tab">333</div>
            </div>
        </div>
        <!-- <input type="text" name="" id="mysearch">
        <ul id="list"></ul> -->
    </div>

    <script>
        var ajax = function (evt) {
            console.log(evt.target.value)
            if (!evt.target.value) {
                list.innerHTML = ''
                return
            }
            var oscript = document.createElement('script')
            oscript.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=60449,60824,60816&wd=${evt.target.value}&his=%5B%7B%22time%22%3A1663731731%2C%22kw%22%3A%22%E7%94%B5%E8%84%91%E7%AE%A1%E5%AE%B6%22%7D%2C%7B%22time%22%3A1687836953%2C%22kw%22%3A%22%E5%9F%BA%E7%A1%80%E6%89%93%E5%AD%97%E5%9F%B9%E8%AE%AD%E6%9C%BA%E6%9E%84%22%7D%2C%7B%22time%22%3A1698249361%2C%22kw%22%3A%22%E5%87%BD%E6%95%B0%22%2C%22fq%22%3A2%7D%5D&req=2&csor=2&pwd=a&cb=aaa&_=1728032692281`
            document.body.appendChild(oscript)

            oscript.onload = function () {
                oscript.remove()
            }
        }


        function aaa(obj) {
            console.log(obj.g)
            list.innerHTML = obj.g.map(item => `
            <li class="list-group-item">${item.q}</li>
`).join('')
        }
        //函数防抖。闭包使得timer能够写在函数里面
        mysearch.oninput = (function () {
            var timer = null
            return function (evt) {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(function () {
                    ajax(evt)
                }, 500)
            }
        })()
        mysearch.onblur = function () {
            list.innerHTML = ''
        }
    </script>
    <script src="index.js" type="module">
    </script>

</body>
</html>